<template>
  <div class='bg-white dark:bg-zinc-800 duration-300 sticky top-0 left-0 z-10 dark:text-zinc-300 w-full'>
    <div class='text-sm ml-1 pt-1 w-full'>
      <div
        class='w-full justify-between flex'
      >
        <div
          @click='onShowPopup'
          class='pl-2 pt-0.5'
        >{{activeProvince}}
        </div>
        <div
          @click='themeChange'
          class='pr-3'
        >
          <m-svg-icon
            v-if='$store.getters.themeType === THEME_LIGHT'
            name='lightMode'
            class='w-2 h-2'
          >
          </m-svg-icon>
          <m-svg-icon
            v-if='$store.getters.themeType === THEME_DARK'
            name='darkMode'
            class='w-2 h-2 dark:fill-slate-50'
          >
          </m-svg-icon>
        </div>
      </div>
    </div>
    <m-popup v-model='isVisible'>
      <menu-vue
        :dataList='list'
        @onItemClick = 'onItemClick'
      ></menu-vue>
    </m-popup>
  </div>
  <div class='w-full text-base py-1 dark:bg-zinc-800 dark:text-zinc-300'>
    <div class='w-[95%] pl-[5%]'>
      <!-- 搜索图标 -->
      <m-svg-icon
        class='w-2 h-2 absolute left-3 top-5'
        name='search'
        color='#707070'
      >
      </m-svg-icon>
      <input class='block w-full h-[30px] pl-4 outline-0 bg-zinc-100 caret-zinc-400 rounded-sm
              text-zinc-900 tracking-wide border border-zinc-100 focus:border-blue-400 text-sm
              dark:bg-zinc-700 dark:border-zinc-600 dark:text-zinc-300'
             type='text'
             placeholder='请输入型号'
      />
    </div>
  </div>
</template>

<script setup>
import { THEME_DARK, THEME_LIGHT } from '@/constants'
import { ref } from 'vue'
import store from '@/store'
import MenuVue from '@/views/main/mainHeader/menu/index.vue'

const isVisible = ref(false)
const onShowPopup = () => {
  isVisible.value = true
}
const list = ref([
  { name: '南京' },
  { name: '北京' },
  { name: '上海' },
  { name: '江苏' },
  { name: '浙江' }
])
const activeProvince = ref('上海')
const onItemClick = (index) => {
  activeProvince.value = list.value[index].name
  isVisible.value = false
}

const themeChange = () => {
  store.commit('theme/changeThemeType', store.getters.themeType === THEME_LIGHT ? THEME_DARK : THEME_LIGHT)
}
</script>

